<template>
  <!-- <div id="certificate">
    <Myheader :page="page"></Myheader>
    <myflow :stepindex=3></myflow>
    <router-view @pushrouter="pushrouter" :page="page"></router-view>
  </div> -->
  <!-- <div id="certificate">
    
  </div> -->

  <div style="height:100%" id='certificate'>

    <drawer width="200px;" :show.sync="drawerVisibility" :show-mode="showModeValue" :placement="showPlacementValue" :drawer-style="{ background:'rgba(0,0,0,.75)', width: '200px'}">
      <!-- drawer content -->
      <div slot="drawer">
        <group>
          <p v-for="(data,index) in list">
            <a class="" href="javascript:void(0)" @click="goAnchor('#anchor-'+index)"> {{data}} </a>
          </p>
        </group>
      </div>

      <!-- main content -->
      <view-box ref="viewBox" body-padding-top="140px" body-padding-bottom="0px">

        <Myheader v-if='pageType=="baoming"' id='type_baoming' :page="page"></Myheader>

        <div id="x-header">

          <x-header v-if='pageType!="baoming"' slot="header" :left-options="{backText: ''}" style="width:100%;position:absolute;left:0;top:0;z-index:100;" :title="project" :transition="headerTransition" @on-click-more="onClickMore">
            <a href="./#/racelist" style="font-size:24px" slot="right">
              <i class="fa fa-home fa-fw"></i>
            </a>

          </x-header>

          <myflow :stepindex=3></myflow>

          <div class="groupWarp" v-show="!showLoading">
            <group>
              <!-- <cell v-for="event in eventList" :key="event.id" :title=event.name link="/disclaimer"
              :disabled="!getState1(event)"
              :inline-desc="getState(event)"
              @click.native="setProject(event.name,event.id,raceid)"></cell> -->
              <!-- <checklist title="" :options="commonList" v-model="radioValue" :max="1" @on-change="change"></checklist> -->

            </group>
          </div>
          <loading :show='showLoading'></loading>

        </div>

        <!-- remember to import BusPlugin in main.js if you use components: x-img and sticky -->
        <transition @after-enter="$vux.bus && $vux.bus.$emit('vux:after-view-enter')">
          <router-view class="router-view"></router-view>
        </transition>
        <Ad v-if='pageType=="baoming"' :page="page"></Ad>

        <div class="button_header fixBottomButton" v-if="$route.path!=='/certificate/number'&&pageType=='baoming'" id='x-bottom'>
          <x-header slot="header" style="width: 100%;position: fixed;bottom: 0px;z-index: 100;max-width: 850px;margin: 0 auto;" title="" >
            <div slot="overwrite-left"></div>
            <!-- <x-icon @click.native="showMenu=true" slot="overwrite-left" type="navicon" size="35" style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon> -->
            <div class="rightbottom-button" @click="next" style="color:#fff;font-size: 18px;" slot="right">
              下一步
            </div>

          </x-header>
          <actionsheet v-model="showMenu" :menus="menus"></actionsheet>
        </div>

        <div class="button_header fixBottomButton" v-if="$route.path!=='/certificate/number'&&pageType!='baoming'" id='x-bottom'>
          <x-header slot="header" style="width: 100%;position: fixed;bottom: 0px;z-index: 100;max-width: 850px;margin: 0 auto;" title="" >

            <div slot="overwrite-left"></div>
            <div @click="next" style="color:#fff;font-size: 18px;" slot="right">
              下一步
            </div>

          </x-header>
          <actionsheet v-model="showMenu" :menus="menus"></actionsheet>
        </div>

        <!-- <x-header @click.native='next' slot="header" style="width:100%;position:absolute;left:0;bottom:0;z-index:100;" title="" :transition="headerTransition" @on-click-more="onClickMore">
            <span slot="overwrite-left">

            </span>zzzzz
            <a>下一步/Next</a>
          </x-header> -->

      </view-box>

    </drawer>

  </div>

</template>

<script type="text/ecmascript-6">
/* eslint-disable*/
import Ad from "@/common/components/ad.vue";

import Myheader from "@/common/components/myheader.vue";
import Myflow from "@/common/components/myflow.vue";
import { setTitle } from "@/common/js/main.js";
import mixin from "@/common/js/mixin";
import {
  Checklist,
  Loading,
  CheckIcon,
  Radio,
  ViewBox,
  XHeader,
  Swiper,
  SwiperItem,
  debounce,
  XInput,
  Group,
  XButton,
  Grid,
  GridItem,
  FormPreview,
  Cell,
  LoadMore,
  Actionsheet,
  Toast,
  Confirm,
  Flexbox,
  FlexboxItem,
  Card,
  Drawer,
  TransferDomDirective as TransferDom
} from "vux";

export default {
  mixins: [mixin],
  props: ["page", "host"],
  data() {
    return {
      pageType: "",
      raceId: "",
      showModeValue: "overlay",
      drawerVisibility: false,
      showPlacement: "left",
      showPlacementValue: "left",
      drawerVisibility: false,
      disclaimer: false,
      list: ["赛事简介", "赛事声明"],
      showLoading: false
    };
  },
  beforeCreate() {
    if (
      !window.localStorage.getItem("eventId") ||
      !window.localStorage.getItem("raceId")
    ) {
      this.$router.push({ path: "/" });
    }
  },
  computed: {
    headerTransition() {
      if (!this.direction) return "";
      return this.direction === "forward"
        ? "vux-header-fade-in-right"
        : "vux-header-fade-in-left";
    }
  },
  created() {
    this.pageType = window.localStorage.getItem("pageType");

    this.setIdentity();
    this.project = window.localStorage.getItem("project");
    //setTitle(this.project);
    window.localStorage.removeItem("idtype");
    window.localStorage.removeItem("national");
  },
  mounted() {
    if (this.pageType == "baoming") {
      document.querySelector("#vux_view_box_body").style.paddingTop = "0";
      document.querySelector("#myflow").style.position = "static";
    }
  },
  methods: {
    next() {
      //window.localStorage.getItem('')
      //console.log(windowlo)
      if (window.localStorage.getItem("idtype") == undefined) {
        this.$vux.toast.show({
          type: "text",
          text: "请选择",
          onHide() {}
        });
      } else {
        this.$router.push({ path: "number" });
      }
    },
    setIdentity() {},
    pushrouter(view) {
      this.$router.push({ path: view });
    },
    onClickMore() {
      this.drawerVisibility = true;
    },
    onShowModeChange(val) {
      /** hide drawer before changing showMode **/
      this.drawerVisibility = false;
      setTimeout(one => {
        this.showModeValue = val;
      }, 400);
    },
    onPlacementChange(val) {
      /** hide drawer before changing position **/
      this.drawerVisibility = false;
      setTimeout(one => {
        this.showPlacementValue = val;
      }, 400);
    }
  },
  directives: {
    TransferDom
  },
  components: {
    Ad,
    Checklist,
    Loading,
    CheckIcon,
    Myflow,
    Radio,
    ViewBox,
    XHeader,
    Swiper,
    SwiperItem,
    debounce,
    XInput,
    Group,
    XButton,
    Grid,
    GridItem,
    FormPreview,
    Cell,
    LoadMore,
    Actionsheet,
    Toast,
    Myheader,
    Confirm,
    Flexbox,
    Card,
    Drawer,
    FlexboxItem
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">
#myflow {
  width: 100%;
  top: 47px;
  position: absolute;
  background: #fcf9fe;
  z-index: 999;
}

#certificate .vux-header .vux-header-title {
  font-size: 18px;
}

#certificate .weui-wepay-flow,
.weui-wepay-flow-auto {
  width: 100%;
}
#certificate #type_baoming {
  img {
    max-width: 100%;
  }
}

.card-demo-content01 {
  padding: 10px 0;
}

.card-demo-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
</style>






